<template>
  <h3>数据传输</h3>

  <hr>
  <div>
    <div style="margin-left: 0;width:60%;float: left;">
      <span>选择输入数据库：</span>
      <a-select
          ref="select"
          v-model:value="param.readResource"
          style="width: 120px"
          @change="readDsChange"
          :placeholder="param.readResource"
          :default-value=param.readResource
      >
        <a-select-option
            v-for="item in p.dataSources"
            :key="item"
            :label="item"
            :value="item"
        >
          {{ item }}
        </a-select-option>
      </a-select>

      <span style="padding-left: 10%">选择输入表：</span>
      <a-select
          ref="select"
          v-model:value="param.readTableName"
          style="width: 220px"
          :allowClear="allowClear"
      >
        <a-select-option
            v-for="item in p.readTableNames"
            :key="item"
            :label="item"
            :value="item"
        >
          {{ item }}
        </a-select-option>
      </a-select>


      <br>
      <br>
      <br>

      <span>选择输出数据库：</span>

      <a-select
          ref="select"
          v-model:value="param.writerResource"
          style="width: 120px"
          @change="writeDsChange"
          :placeholder="param.writerResource"
          :default-value=param.writerResource
      >
        <a-select-option
            v-for="item in p.dataSources"
            :key="item"
            :label="item"
            :value="item"
        >
          {{ item }}
        </a-select-option>
      </a-select>

      <span style="padding-left: 10%">选择输出表：</span>
      <a-select
          ref="select"
          v-model:value="param.writeTableName"
          style="width: 220px"
          :allowClear="allowClear"
      >
        <a-select-option
            v-for="item in p.writeTableNames"
            :key="item"
            :label="item"
            :value="item"
        >
          {{ item }}
        </a-select-option>
      </a-select>

      <br>
      <br>
      <a-button type="primary" size="large" @click="add">添加</a-button>
    </div>

    <div style="float: left;padding-right: -20%">
      <a-table :dataSource="transList" :rowKey="(record,index)=>{return index}" :columns="columns"/>

      <hr>

      <a-button type="primary" size="large" @click="add">开始发送</a-button>
    </div>
  </div>

</template>

<script>
import {onMounted, watchSyncEffect, reactive, watchEffect} from 'vue'
import axios from 'axios'

export default {
  name: 'trans',
  setup() {
    let transList = reactive([])
    let columns = [
      {
        title: '读数据源',
        dataIndex: 'readResource',
        key: 'readResource',
      },
      {
        title: '读表',
        dataIndex: 'readTableName',
        key: 'readTableName',
      },
      {
        title: '写数据源',
        dataIndex: 'writerResource',
        key: 'writerResource',
      },
      {
        title: '写表',
        dataIndex: 'writeTableName',
        key: 'writeTableName',
      },
    ]
    let p = reactive({
      dataSources: [],
      readTableNames: [],
      writeTableNames: []
    })

    let param = reactive({
      readTableName: "",
      writeTableName: "",
      readResource: "dev",
      writerResource: "dev"
    })

    function add() {
      let isI=0;
      Object.keys(param).map(key => {
        if(param[key].trim().length===0){
         isI++;
        }
      })
      if (isI===0){
        transList.push(Object.assign({},param) )
        Object.keys(param).map(key => {
          param[key] = ""
        })
      }else {
        alert("属性不能为空。")
      }

    }

    function jj(value) {
      return new Promise((resolve, reject) => {
        axios.get('http://localhost:8080/view/getTableNames?dsName=' + value).then(resp => {
          resolve(resp)
        }).catch(error => {
          reject(error)
        });
      });
    }

    watchSyncEffect(async () => {
      let write = await jj(param.writerResource)
      p.writeTableNames = write.data.data
    })
    watchEffect(async () => {
      let read = await jj(param.readResource)
      p.readTableNames = read.data.data
    })

    async function readDsChange(value) {
      param.readTableName = ""

    }

    async function writeDsChange(value) {
      param.writeTableName = ""
    }

    onMounted(() => {
      axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
          response => {
            console.log(response.data)
          },
          error => {
            alert(error.message)
          }
      )
      axios.get('http://localhost:8080/view/getDadaBases').then(
          response => {
            p.dataSources.push(...response.data.data)
          },
          error => {
            alert(error.message)
          }
      )
    })


    return {
      add, readDsChange, writeDsChange, p, param, allowClear: true, transList, columns
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
